<template>
  <div class="right">
    <div class="headInfo">
      <div class="text">数据服务</div>
      <img src="@/assets/newDashboard/箭头.png" alt="" />
    </div>
    <rightOne :propsone="rightcelloneArr"></rightOne>
    <rightTwo :propstow="rightcellthreeArr"></rightTwo>
    <rightThree :propsthree="rightcelltowArr"></rightThree>
  </div>
</template>

<script>
import { countApiCallSortUserCallSortcount } from '@/api/index/index.js'
import rightOne from './rightOne.vue'
import rightTwo from './rightTwo.vue'
import rightThree from './rightThree.vue'
import Cookies from 'js-cookie'

export default {
  name: 'SdssJddsZhgjWebIndex',
  components: {
    rightOne,
    rightTwo,
    rightThree
  },
  data() {
    return {
      rightcelloneArr: undefined,
      rightcelltowArr: undefined,
      rightcellthreeArr: undefined
    }
  },

  mounted() {
    let time = setTimeout(() => {
      if (Cookies.get('Admin-Token')) {
        countApiCallSortUserCallSortcount().then((res) => {
          if (res.data.code == 200) {
            console.log({
              ...JSON.parse(res.data.data.split('---')[0]),
              ...JSON.parse(res.data.data.split('---')[1]),
              ...JSON.parse(res.data.data.split('---')[2])
            })
            const obj = {
              ...JSON.parse(res.data.data.split('---')[0]),
              ...JSON.parse(res.data.data.split('---')[1]),
              ...JSON.parse(res.data.data.split('---')[2])
            }
            this.rightcellthreeArr = obj.apiCallSort
            this.rightcelloneArr = obj.count
            this.rightcelltowArr = obj
            // console.log(this.rightcelloneArr, this.rightcelltowArr)
            clearInterval(time)
          }
        })
      }
    }, 1000)
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
.right {
  margin-top: 9vh;
  margin-bottom: 1vh;
  margin-right: 0.3vw;
  width: 25%;
  height: 75vh;
  background-color: rgba(2, 54, 68, 0.8);
  display: flex;
  flex-direction: column;
}
.headInfo {
  margin: 0 auto;
  margin-top: 2vh;
  margin-bottom: -2vh;
  width: 65%;
  height: 4.5vh;
  background-image: url('~@/assets/newDashboard/headInfo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .text {
    text-align: center;
    font-size: 1.25vw;
    font-family: Source Han Sans CN;
    font-weight: 800;
    color: #ffffff;
  }
  img {
    display: block;
    width: 0.8594vw;
    height: 1.0185vh;
    position: absolute;
    top: 50%;
    right: -21%;
    transform: translate(-50%, -50%);
  }
}
</style>
